import React, { Component } from 'react'
import Child from './Child'
/**
 * 本小节讲的内容是错误边界
 * 当子组件发生错误时，我们会希望子组件的错误不影响到父组件其他功能的使用
 * 这时候我们就可以在父组件上设置错误边界，来防止由于子组件错误而影响到整个页面不能使用的情况出现
 * 解决方法是利用react的一个生命周期 getDerivedStateFromError
 * 
 * 需要注意的是，错误边界是在打包发布之后才能比较好的看出效果
 */
export default class Parent extends Component {

    state = {hasError:''}

    static getDerivedStateFromError(err){
        return {hasError: err}
    }

    render() {
        return (
            <div>
                <h2>我是父组件</h2>
                {this.state.hasError ? '网络不通畅，请稍后再试...':<Child/>}
            </div>
        )
    }
}
